<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import user from '@/composables/user'
import { payrollDetail } from '@/api/payroll'
import type { payrollDetailDto } from '@/api/payroll/type'

const data = ref({} as payrollDetailDto)
async function getData(val: string | number) {
    const result = await payrollDetail({
        id: val,
    })
    console.log(result)
    data.value = result
}
function onCallPhone() {
    uni.makePhoneCall({
        phoneNumber: data.value.params.contactsPhone,
    })
}
onLoad(async (options: any) => {
    user.waitLogin().then(() => {
        getData(options.id)
    })
})
</script>

<template>
    <NavbarContainer>
        <view scroll-y bindscrolltolower="getData" class="container">
            <view class="payroll-list">
                <view class="payroll">
                    <view class="payroll-title">{{ data.userName }}的工资单</view>
                    <view class="payroll-data">
                        <view v-for="(item, i) in data.params.bodyArray" :key="i" class="payroll-data-row">
                            <text class="key">{{ data.params.headArray[i] }}：</text>
                            <text class="value {{index===2?'orange':''}}">{{ item || '未填写' }}</text>
                        </view>
                    </view>
                </view>
                <view v-if="data.params.contactsPhone" class="flex-center">
                    对此单有疑问？ <text class="blue" @click="onCallPhone">
                        联系驻厂
                    </text>
                </view>
                <view v-else class="flex-center">劳务公司未设置联系人</view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.container {
    background-color: #fafafc;
    width: 100%;
    height: 100vh;
}

.orange {
    color: #ff7642;
}

.flex-center {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blue {
    color: #3E5FF5;
    font-size: 28rpx;
    cursor: pointer;
}

.payroll {
    width: 690rpx;
    margin: 20rpx auto 20rpx;
    background: #ffffff;
    border-radius: 8rpx;
    padding: 30rpx;
    box-sizing: border-box;
}

.payroll-title {
    font-size: 32rpx;
}

.payroll-data {
    margin-top: 20rpx;
    background-color: white;
    font-size: 24rpx;
    padding: 15rpx 30rpx;
    box-sizing: border-box;
}

.payroll-data-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payroll-data-head .active {
    color: #ff7e68;
}

.payroll-data-row {
    padding: 10rpx 0;
}

.key {
    color: #9497b1;
}
</style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "我的工资单"
    }
}
</route>
